<template>
  <div class="flex flex-col">
    <div class="flex-1 justify-between p-[10px] overflow-auto">
      <div class="mr-[14px]">
        <el-form ref="formRef" style="max-width: 500px" name="news-edit" :model="formState"
          :valibate-messages="{ required: '请输入${label}' }">

          <el-form-item v-show="false" name="id" clsas="p">
            <el-input v-model="formState.id" placeholder="请输入" />
          </el-form-item>

          <el-form-item prop="news-title" label="新闻标题" :rules="[{ required: true }]">
            <el-input v-model="formState.newsTitle" placeholder="请输入" />
          </el-form-item>

          <el-form-item prop="classReal" label="新闻标签" :rules="[{ required: true, message: '请选择新闻标签' }]">
            <el-select v-model="formState.classReal" :options="newsTypes"></el-select>
          </el-form-item>

          <el-form-item prop="siteName" label="新闻来源">
            <el-input v-model="formState.siteName" placeholder="请输入" />
          </el-form-item>

          <el-form-item prop="newUrl" label="新闻网址">
            <el-input v-model="formState.newUrl" placeholder="请输入" />
          </el-form-item>

          <el-form-item prop="abstractReal" label="新闻摘要" :rules="[{ required: true }]">
            <el-input v-model="formState.abstractReal" type="textarea" :autosize="{ minRows: 5 }" />
          </el-form-item>

          <el-form-item prop="markContent" label="新闻正文" :rules="[{ required: true }]">
            <el-input v-model="formState.markContent" type="textarea" :autosize="{ minRows: 5 }" />
          </el-form-item>

        </el-form>
      </div>

      <div class="flex-1 h-full">
        <div class="contantTitle" v-if="mode.mode === 'edit' || mode.mode === 'read'">正文内容</div>
        <div v-html="formState.markContent && marked.parse(formState.markContent)"></div>
      </div>
    </div>

    <div class="footer">
      <el-button type="primary" @click="handleClick(formRef)">提交</el-button>
      <el-button>取消</el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref ,onMounted, reactive} from 'vue'
import { updateNews, createNews } from '@/api/newsApi'
import {newsTypes} from '@/components/newsTypes'
import { ElMessage ,type FormInstance} from 'element-plus'
import {marked} from 'marked'

const props= defineProps(['mode','data'])
const  { mode,data }=props
const emits=defineEmits(['close'])         
const formRef = ref<FormInstance>()
const defaultState = reactive({
  id: undefined,
  newsTitle: '',
  classReal: 1,
  siteName: '',
  newUrl: '',
  abstractReal: '',
  markContent: '',
})
const formState = ref({
  ...defaultState,
  ...(data || {}),
})

interface ApiResponse {
  code: number;
  message: string;
  data?: any;
}

const handleClick = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
      if (mode === 'create') {
        createNews({ ...formState.value, addMode: 1 }).then((res) => {
          const response = res as ApiResponse
          if (response.code === 200) {
            ElMessage.success(response.message)
          }
        })
      }
      if (mode === 'edit') {
        updateNews(formState)
      }
    } else {
      console.log('error submit!', fields)
    }
  })
}
onMounted(()=>{
  if(mode.value==='create'){
    formState.value=defaultState
  }
})
</script>

<style scoped></style>
